<template lang="html">
	<div>
	<!-- 头部 -->
		<div id="header_common">
			<router-link to="/Orders">
				<div class="header_right">
					<a href="javascript:;">
						<img src="../assets/allsendorder.png">
					</a>
				</div>
			</router-link>
			<h2>全国送</h2>
		</div>
		<div class="warp_div-main" >
			<div class="div-div_l"></div>
			<!-- TOP -->
			<p id="back-to-top-l">
				<a href="javascript:;" @click="fn1">
					<span></span>
				</a>
			</p>
			<!-- 购物车 -->
			<div id="back-top-to-t">
				<router-link to="/Cart">
					<a href="javascript:;"class="div_top-t">
						<span></span>
					</a>
				</router-link>
			</div>
			<div class="t-t">
				<router-link to="/Market">
					<a href="javascript:;">
						<img src="../assets/back.png">
					</a>
				</router-link>
			</div>
			<div class="warp_div-tit">
				<div class="warp_tit_div">
					<div class="div-tvc">
						<img src="http://imgcdn.xuxian.com/upload/2016/09/27/20160927182009926.jpg">
					</div>
				</div>
			</div>
			<div class="txt_bottom">
				<dl>
					<dt>
						【许鲜优质低价】卖爆北京城，红白柚配搭2个仅售15.50
					</dt>
					<dd>
						15.50
						<span>元/份</span>
					</dd>
				</dl>
				<p>19.00元/份</p>
			</div>
			<div class="big_div">
				<img src="http://imgcdn.xuxian.com/upload/2016/09/27/20160927182009926.jpg">
				<img src="http://imgcdn.xuxian.com/upload/2015/12/11/20151211151925515.jpg">
				<img src="http://imgcdn.xuxian.com/upload/2016/09/19/20160919155031432.jpg">
			</div>
			<div class="download-now">
				<div class="download-cont">
					<div class="jiaandjian">
						<img src="../assets/left_jian.png" id="jian" @click="numJian">
						<span class="test">{{numData}}</span>
						<img src="../assets/right_jia.png" id="jia" @click="numJia">	
					</div>
					<a href="javascript:;">立即购买</a>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data (){
			return {
				numData : 0
			}
		},
		methods:{
			fn1 () {
				// var h = document.body||document.documentElement;
				// h.scrollTop = 0;
				var timer;
	    		var h = document.body||document.documentElement;
	    		timer = setInterval(function(){
		    		if (h.scrollTop == 0) {
		    			clearInterval(timer);
		    		}else{
		    			h.scrollTop -= 5;
		    		}
		    	},10)
			},
			numJian () {
				if (this.numData > 0) {
					return this.numData--;
				}
			},
			numJia () {
				return this.numData++;	
			}
		}
	}
</script>

<style lang="css">

	.warp_div-main{
		width:100%;height:100%;
		max-width:48rem;
		min-width:16rem;
		margin:0 auto;
		background:#FFFFFF;
	}
	/*========== TOP =========*/
	#back-to-top-l{
		position:fixed;
		bottom:5rem;
		right:.9rem;
	}
	#back-to-top-l a,##back-top-to-t a{
		text-align:center;
		text-decoration:none;
		color:#d1d1d1;
		width:2.5rem;
		display:block;
	}
	#back-to-top-l a span{
		background:url(../assets/up_top.png) no-repeat;
		width:2.5rem;background-size: 100% 100%;
		display:block;height:2.5rem;
	}
	/*========== 购物车 (通用样式适用于同级页面) ============*/
	/*=========  ==========*/
/*================*/
	.warp_div-main .div-div_l{
		width:100%;
		height:2.394rem;
		background-color:#fff;
	}
	.warp_div-main .warp_div-tit{
		width:100%;height:3.6rem;
		margin-top:.1rem;
	}
	.warp_div-main .warp_tit_div{
		width:100%;height:100%;
	}
	.warp_div-main .warp_tit_div img{
		width:100%;
	}
/*=========== 返回图标 =========*/
	.warp_div-main .t-t img{
		position:fixed;
		left:.5rem;top:3rem;
		z-index:999;width:10%;
	}

	.warp_div-main .txt_bottom{
		width:15rem;
		margin:0 auto;
		margin-top:13.5rem;
	}
	.warp_div-main .txt_bottom>dl{
		width:100%;
	}
	.warp_div-main .txt_bottom>dl>dt{
		font-family:"微软雅黑";
		font-size:.67rem;
		color:#424644;
		font-weight:bold;
		margin-top:.3rem;
	}
	.warp_div-main .txt_bottom>dl>dd{
		font-family:"微软雅黑";
		font-size:1.35rem;
		font-weight:bold;
		color:#ff602c;
		margin-top:.1rem;
	}
	.warp_div-main .txt_bottom>dl>dd>span{
		font-family:"微软雅黑";
		font-size:.75rem;
	}
	.warp_div-main .txt_bottom>p{
		width:100%;border-bottom:1px solid #d9d9d9;
		font-family:"微软雅黑";
		font-size:.75rem;color:#6f6f6f;
		font-weidth:bold;
		text-decoration:line-through;
		padding-bottom:.35rem;
	}

	.warp_div-main .big_div{
		width:100%;
	}
	.warp_div-main .big_div img{
		width:100%;display:block;
		height:auto;
	}
	.warp_div-main .big_div img:last-of-type{
		margin-bottom:100px;
	}
	
	.warp_div-main .download-now{
		position:fixed;bottom:0;
		height:2.5rem;line-height:2.5rem;
		opacity:0.96;width:100%;
		background:#fff;
		font-family:"Microsoft Yahei";
		margin-bottom:2.5rem;
		overflow:hidden;z-index:999;
	}
	.warp_div-main .download-now>.download-cont{
		top:0;
	}
	.warp_div-main .download-now>.download-cont>a{
		display:block;border:none;
		border-radius:3px;background:#424644;
		font-family:"微软雅黑";
		font-size:.8rem;color:#FFFFFF;
		width:5.5rem;height:1.68rem;
		line-height:1.68rem;text-align:center;
		font-weight:100;margin-top:0;
		float:right;margin-right:.5rem;
	}
	.warp_div-main .download-now>.download-cont>.jiaandjian{
		width:5.854rem;height:1.5rem;
		border:2px solid #cacaca;
		float:left;overflow:hidden;
		margin:0 0 0 1rem;
	}
	.warp_div-main .download-now>.download-cont>.jiaandjian span{
		margin-top:.1rem;
	}
	.warp_div-main #jian{
		display:block;
		float:left;
		height:1.5rem;
		line-height:1.5rem;
		text-align: center;
		width:30%;
	}
	.warp_div-main .download-now>.download-cont>.jiaandjian>.test{
		display:block;width:40%;height:1.5rem;
		line-height:1.5rem;text-align:center;
		float:left;font-family:"微软雅黑";
		font-size:1rem;color:#424644;
	}
	.warp_div-main #jia{
		display:block;
		float:left;
		height:1.5rem;
		line-height:1.5rem;
		text-align: center;
		width:30%;
	}
</style>